<template>
	<div class="index_m">
		<h1>定制页管理</h1>
		<div class="content0" v-if="modelIndex===0">
			<div class="select_model_top">
				<h2>选择模式</h2>
			</div>
			<div class="all_models">
				<div class="common_model public_model">
					<div class="common_top">应用号名称</div>
					<div class="common_content">内容展示区</div>
					<div class="common_bottom">
						<div class="phone_show1_icon1" style="cursor:default;" v-for="(item,index) in 5" :key="index">
							<img src="../../assets/images/manage/menu/gr_home.png" alt="">
							<p>首页</p>
						</div>
					</div>
				</div>
				<div class="free_model public_model">
					<div class="common_top">自定义</div>
					<div class="common_content">内容展示区</div>
					<div class="common_bottom">
						<div class="diy_footer">
							<p>自定义</p>
							<p>自定义</p>
							<p>自定义</p>
							<p>＋</p>
						</div>
					</div>
				</div>
				<div class="mpk_model public_model"></div>
			</div>
			<div class="all_options">
				<div class="public_option">
					<h1>常规模式</h1>
					<p>顶部栏和底部栏样式固定</p>
					<button @click="selModel(1)">选择</button>
				</div>
				<div class="public_option">
					<h1>自由模式</h1>
					<p>顶部栏和底部栏样式任意定制</p>
					<button @click="selModel(2)">选择</button>
				</div>
				<div class="public_option">
					<h1>自由MPK模式</h1>
					<p>更酷炫更丰富的自由模式</p>
					<button @click="selModel(3)">选择</button>
				</div>
			</div>
		</div>
		<!-- 常规模式 -->
		<div class="content1" v-if="modelIndex===1">
			<div class="select_model_top">
				<h2>常规模式</h2>
				<p>流程：1.添加目标模块 2.编辑模块属性 3.选择插入内容</p>
			</div>
			<div class="content1_option">
				<div class="common_model public_model">
					<div class="common_top">今日特卖</div>
					<div class="common_content">
						<div class="add_formats" @click="attrEdit" v-if="selFormatData">
							<p>姓名：{{ selFormatData.name }}</p>
							<p>年龄：{{ selFormatData.age }}</p>
						</div>
						<p @click="addModel">+添加模块</p>
					</div>
					<div class="common_bottom">
						<div class="phone_show1_icon1"
						     :class="{sel1_1:indexIndex===index+1}" v-for="(item,index) in 5" :key="index" @click="selIcon1(index+1)">
							<img src="../../assets/images/manage/menu/gr_home.png" alt="">
							<p>首页</p>
						</div>
					</div>
				</div>
				<div class="no_content1" v-if="addModelIndex===0">点击左侧添加模块进行编辑操作</div>
				<div class="add_model" v-if="addModelIndex===1">
					<h5>添加模块</h5>
					<div class="type1">
						<p>类型</p>
						<el-select v-model="value1" placeholder="请选择" @change="changeType">
							<el-option
								v-for="item in option1"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="format1">
						<p>版式</p>
						<div class="format1_lists">
							<div class="format1_list" @click="selFormat(item)" v-for="(item,index) in formatData" :key="index">
								<p>姓名：{{ item.name }}</p>
								<p>年龄：{{ item.age }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="attr_edit" v-if="addModelIndex===2">
					<div class="edit_title">
						<h3>属性编辑</h3>
						<p>保存</p>
					</div>
					<div class="sel_datas">
						<p>选取呈现的数据内容</p>
						<div class="sel_data_input">
							<input type="text" placeholder="从必读列表中添加">
							<p @click="selDatas">选取</p>
						</div>
					</div>
					<div class="edit_selects">
						<div class="column_select">
							<p>设置列数</p>
							<el-select v-model="value2" placeholder="请选择" @change="changeColumn">
								<el-option
									v-for="item in option2"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="sort_select column_select">
							<p>内容显示排序</p>
							<el-select v-model="value3" placeholder="请选择" @change="changeSort">
								<el-option
									v-for="item in option3"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>
					<!-- 选取内容数据列表 -->
					<div class="sel_mask" v-if="isSelectData">
						<div class="edit_table_info">
							<div class="close">
								<p @click.stop="isSelectData=false">✖</p>
							</div>
							<div class="edit_table_condition">
								<h2>从必读列表中选取</h2>
								<div class="edit_table_search">
									<el-input
										style="width:320px;"
										placeholder="搜索相关文章"
										@keydown.native="keySearch"
										v-model="input1">
										<el-button @keydown.native="keySearch" @click.native="searchs" slot="append" icon="el-icon-search"></el-button>
									</el-input>
									<p>请选择一个分类</p>
								</div>
							</div>
							<div class="add_table_infos">
								<div class="add_no_table" v-if="!showLists&&addDatas.length===0">
									<h1>你还没有添加任何内容</h1>
									<p @click="addContent">+添加内容</p>
								</div>
								<div class="add_datas" v-if="!showLists&&addDatas.length>0">
									<el-table
										:data="addDatas"
										tooltip-effect="dark"
										style="width: 100%">
										<el-table-column
											type="selection"
											width="55">
										</el-table-column>
										<el-table-column
											prop="name"
											label="姓名"
											width="120">
										</el-table-column>
										<el-table-column
											prop="address"
											label="地址"
											show-overflow-tooltip>
										</el-table-column>
										<el-table-column
											label="日期">
											<template slot-scope="scope">{{ scope.row.date }}</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="table_lists" v-if="showLists">
									<el-table
										:data="tableData3"
										tooltip-effect="dark"
										style="width: 100%"
										@selection-change="handleSelectionChange">
										<el-table-column
											type="selection"
											width="55">
										</el-table-column>
										<el-table-column
											prop="name"
											label="姓名"
											width="120">
										</el-table-column>
										<el-table-column
											prop="address"
											label="地址"
											show-overflow-tooltip>
										</el-table-column>
										<el-table-column
											label="日期">
											<template slot-scope="scope">{{ scope.row.date }}</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div class="add_table_btn">
								<button @click="ensure">确定</button>
								<button @click="cancel">取消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="content1_btns">
				<button @click="save1">保存并发布</button>
				<button @click="preview1">预览</button>
			</div>
		</div>
		<!-- 自由模式 -->
		<div class="content2" v-if="modelIndex===2">
			<div class="select_model_top">
				<h2>自由模式</h2>
				<p>操作：1.顶部栏样式配置 2.创建底部栏并配置样式和功能 3.添加目标模块配置</p>
			</div>
			<div class="content2_option">
				<div class="free_model public_model">
					<div class="common_top" :class="{dashed:selIndex2===1}" @click="changeIndex2(1)">
						<span :style="{borderColor:arrow2Color}"></span>
						<h6 :style="{color:title2Color}">{{ title2Name }}</h6>
						<p></p>
					</div>
					<div class="common_content" :style="{background:title22Color}" :class="{dashed:selIndex2===2}" @click="changeIndex2(2)">
						<p>+添加模块</p>
					</div>
					<div class="common_bottom">
						<div class="diy_footer">
							<p @click="changeIndex2(3)" :style="{color:title24Color}" :class="{dashed:selIndex2===3}">{{ title24Name }}</p>
							<p @click="changeIndex2(4)" :style="{color:title24_2Color}" :class="{dashed:selIndex2===4}">{{ title24_2Name }}</p>
							<p @click="changeIndex2(5)" :style="{color:title24_3Color}" :class="{dashed:selIndex2===5}">{{ title24_3Name }}</p>
							<p @click="changeIndex2(6)" :class="{dashed:selIndex2===6}">＋</p>
						</div>
					</div>
				</div>
				<!-- 未选择 -->
				<div class="no_content2" v-if="selIndex2===0">点击左侧顶部栏/中间区/底部栏进行操作</div>
				<!-- 顶部编辑 -->
				<div class="edit_top2" v-if="selIndex2===1">
					<div class="edit_top2_title">
						<h2>顶栏配置</h2>
						<p>保存配置</p>
					</div>
					<div class="edit_top2_title_name">
						<p>标题名</p>
						<input type="text" v-model="title2Name">
					</div>
					<div class="edit_top2_title_color">
						<p>标题颜色</p>
						<div class="selected_color" @click="showColors2=true">
							<p :style="{background:title2Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors2">
							<p class="color1" @click="selColor2(1)"></p>
							<p class="color2" @click="selColor2(2)"></p>
							<p class="color3" @click="selColor2(3)"></p>
							<p class="color4" @click="selColor2(4)"></p>
							<p class="color5" @click="selColor2(5)"></p>
							<p class="color6" @click="selColor2(6)"></p>
							<p class="color7" @click="selColor2(7)"></p>
							<p class="color8" @click="selColor2(8)"></p>
						</div>
						<input type="text" v-model="title2Color" readonly>
					</div>
					<div class="edit_top2_title_img">
						<p>标题图片</p>
						<div class="img_border">
							<img id="showImg" src="../../assets/images/abao/bottomImg.jpg" alt="">
							<input type="file" id="file2" @change="upload2" style="display:none;">
							<button @click="autoClick2">选择</button>
						</div>
					</div>
					<div class="slide_shows">
						<div class="slide_show">
							<p>滑动渐显</p>
							<el-switch
								v-model="switch1"
								active-color="#3ca0ec"
								inactive-color="#cccdcd">
							</el-switch>
						</div>
						<div class="slide_position" v-if="switch1">
							<p>开始位置</p>
							<el-select style="width:140px;" v-model="value4" placeholder="请选择">
								<el-option
									v-for="item in option4"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="edit_top2_title_color">
						<p>返回按键颜色</p>
						<div class="selected_color" @click="showArrowColors2=true">
							<p :style="{background:arrow2Color}"></p>
						</div>
						<div class="all_colors" v-if="showArrowColors2">
							<p class="color1" @click="selArrow2(1)"></p>
							<p class="color2" @click="selArrow2(2)"></p>
							<p class="color3" @click="selArrow2(3)"></p>
							<p class="color4" @click="selArrow2(4)"></p>
							<p class="color5" @click="selArrow2(5)"></p>
							<p class="color6" @click="selArrow2(6)"></p>
							<p class="color7" @click="selArrow2(7)"></p>
							<p class="color8" @click="selArrow2(8)"></p>
						</div>
						<input type="text" v-model="arrow2Color" readonly>
					</div>
					<div class="separate_lines">
						<div class="separate_line">
							<p>分隔线</p>
							<el-switch
								v-model="switch2"
								active-color="#3ca0ec"
								inactive-color="#cccdcd">
							</el-switch>
						</div>
						<div class="line_color" :class="{opacity2:!switch2}">
							<div class="selected_color" @click="showlineColors2=true">
								<p :style="{background:line2Color}"></p>
							</div>
							<div class="all_colors" v-if="showlineColors2">
								<p class="color1" @click="selLine2(1)"></p>
								<p class="color2" @click="selLine2(2)"></p>
								<p class="color3" @click="selLine2(3)"></p>
								<p class="color4" @click="selLine2(4)"></p>
								<p class="color5" @click="selLine2(5)"></p>
								<p class="color6" @click="selLine2(6)"></p>
								<p class="color7" @click="selLine2(7)"></p>
								<p class="color8" @click="selLine2(8)"></p>
							</div>
							<input type="text" v-model="line2Color" readonly>
						</div>
					</div>
				</div>
				<!-- 添加模块编辑 -->
				<div class="edit_content2" v-if="selIndex2===2">
					<div class="edit_content2_title">
						<h2>内容区域配置</h2>
						<p>保存配置</p>
					</div>
					<div class="edit_content2_title_color">
						<p>背景颜色</p>
						<div class="selected_color" @click="showColors22=true">
							<p :style="{background:title22Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors22">
							<p class="color1" @click="selColor22(1)"></p>
							<p class="color2" @click="selColor22(2)"></p>
							<p class="color3" @click="selColor22(3)"></p>
							<p class="color4" @click="selColor22(4)"></p>
							<p class="color5" @click="selColor22(5)"></p>
							<p class="color6" @click="selColor22(6)"></p>
							<p class="color7" @click="selColor22(7)"></p>
							<p class="color8" @click="selColor22(8)"></p>
						</div>
						<input type="text" v-model="title22Color" readonly>
					</div>
					<div class="edit_content2_title_img">
						<p>背景图片</p>
						<div class="img_border">
							<img id="showImg22" src="../../assets/images/abao/bottomImg.jpg" alt="">
							<input type="file" id="file22" @change="upload22" style="display:none;">
							<button @click="autoClick22">选择</button>
						</div>
					</div>
					<div class="edit_content2_title_color">
						<p>菜单颜色</p>
						<div class="selected_color" @click="showColors23=true">
							<p :style="{background:title23Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors23">
							<p class="color1" @click="selColor23(1)"></p>
							<p class="color2" @click="selColor23(2)"></p>
							<p class="color3" @click="selColor23(3)"></p>
							<p class="color4" @click="selColor23(4)"></p>
							<p class="color5" @click="selColor23(5)"></p>
							<p class="color6" @click="selColor23(6)"></p>
							<p class="color7" @click="selColor23(7)"></p>
							<p class="color8" @click="selColor23(8)"></p>
						</div>
						<input type="text" v-model="title23Color" readonly>
					</div>
				</div>
				<!-- 自定义1 -->
				<div class="edit_definite" v-if="selIndex2===3">
					<div class="edit_top2_title">
						<h2>底栏配置</h2>
						<p>保存配置</p>
					</div>
					<div class="edit_top2_title_color">
						<p>菜单颜色</p>
						<div class="selected_color" @click="showColors24=true">
							<p :style="{background:title24Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors24">
							<p class="color1" @click="selColor24(1)"></p>
							<p class="color2" @click="selColor24(2)"></p>
							<p class="color3" @click="selColor24(3)"></p>
							<p class="color4" @click="selColor24(4)"></p>
							<p class="color5" @click="selColor24(5)"></p>
							<p class="color6" @click="selColor24(6)"></p>
							<p class="color7" @click="selColor24(7)"></p>
							<p class="color8" @click="selColor24(8)"></p>
						</div>
						<input type="text" v-model="title24Color" readonly>
					</div>
					<div class="edit_top2_title_name">
						<p>名称</p>
						<input type="text" v-model="title24Name">
					</div>
					<div class="edit_top2_title_color">
						<p>颜色<span style="visibility:hidden;">颜色</span></p>
						<div class="selected_color" @click="showColors25=true">
							<p :style="{background:title25Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors25">
							<p class="color1" @click="selColor25(1)"></p>
							<p class="color2" @click="selColor25(2)"></p>
							<p class="color3" @click="selColor25(3)"></p>
							<p class="color4" @click="selColor25(4)"></p>
							<p class="color5" @click="selColor25(5)"></p>
							<p class="color6" @click="selColor25(6)"></p>
							<p class="color7" @click="selColor25(7)"></p>
							<p class="color8" @click="selColor25(8)"></p>
						</div>
						<input type="text" v-model="title25Color" readonly>
					</div>
					<div class="edit_top2_title_color">
						<p>选中颜色</p>
						<div class="selected_color" @click="showColors26=true">
							<p :style="{background:title26Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors26">
							<p class="color1" @click="selColor26(1)"></p>
							<p class="color2" @click="selColor26(2)"></p>
							<p class="color3" @click="selColor26(3)"></p>
							<p class="color4" @click="selColor26(4)"></p>
							<p class="color5" @click="selColor26(5)"></p>
							<p class="color6" @click="selColor26(6)"></p>
							<p class="color7" @click="selColor26(7)"></p>
							<p class="color8" @click="selColor26(8)"></p>
						</div>
						<input type="text" v-model="title26Color" readonly>
					</div>
					<div class="edit_top2_title_img">
						<p>图标</p>
						<div class="img_border">
							<img id="showImg26" src="../../assets/images/abao/bottomImg.jpg" alt="">
							<input type="file" id="file26" @change="upload26" style="display:none;">
							<button @click="autoClick26">更换图标</button>
						</div>
					</div>
					<div class="separate_lines">
						<div class="separate_line">
							<p>分隔线</p>
							<el-switch
								v-model="switch27"
								active-color="#3ca0ec"
								inactive-color="#cccdcd">
							</el-switch>
						</div>
						<div class="line_color" :class="{opacity2:!switch27}">
							<div class="selected_color" @click="showlineColors27=true">
								<p :style="{background:line27Color}"></p>
							</div>
							<div class="all_colors" v-if="showlineColors27">
								<p class="color1" @click="selLine27(1)"></p>
								<p class="color2" @click="selLine27(2)"></p>
								<p class="color3" @click="selLine27(3)"></p>
								<p class="color4" @click="selLine27(4)"></p>
								<p class="color5" @click="selLine27(5)"></p>
								<p class="color6" @click="selLine27(6)"></p>
								<p class="color7" @click="selLine27(7)"></p>
								<p class="color8" @click="selLine27(8)"></p>
							</div>
							<input type="text" v-model="line27Color" readonly>
						</div>
					</div>
				</div>
				<!-- 自定义2 -->
				<div class="edit_definite" v-if="selIndex2===4">
					<div class="edit_top2_title">
						<h2>底栏配置</h2>
						<p>保存配置</p>
					</div>
					<div class="edit_top2_title_color">
						<p>菜单颜色</p>
						<div class="selected_color" @click="showColors24_2=true">
							<p :style="{background:title24_2Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors24_2">
							<p class="color1" @click="selColor24_2(1)"></p>
							<p class="color2" @click="selColor24_2(2)"></p>
							<p class="color3" @click="selColor24_2(3)"></p>
							<p class="color4" @click="selColor24_2(4)"></p>
							<p class="color5" @click="selColor24_2(5)"></p>
							<p class="color6" @click="selColor24_2(6)"></p>
							<p class="color7" @click="selColor24_2(7)"></p>
							<p class="color8" @click="selColor24_2(8)"></p>
						</div>
						<input type="text" v-model="title24_2Color" readonly>
					</div>
					<div class="edit_top2_title_name">
						<p>名称</p>
						<input type="text" v-model="title24_2Name">
					</div>
					<div class="edit_top2_title_color">
						<p>颜色<span style="visibility:hidden;">颜色</span></p>
						<div class="selected_color" @click="showColors25_2=true">
							<p :style="{background:title25_2Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors25_2">
							<p class="color1" @click="selColor25_2(1)"></p>
							<p class="color2" @click="selColor25_2(2)"></p>
							<p class="color3" @click="selColor25_2(3)"></p>
							<p class="color4" @click="selColor25_2(4)"></p>
							<p class="color5" @click="selColor25_2(5)"></p>
							<p class="color6" @click="selColor25_2(6)"></p>
							<p class="color7" @click="selColor25_2(7)"></p>
							<p class="color8" @click="selColor25_2(8)"></p>
						</div>
						<input type="text" v-model="title25_2Color" readonly>
					</div>
					<div class="edit_top2_title_color">
						<p>选中颜色</p>
						<div class="selected_color" @click="showColors26_2=true">
							<p :style="{background:title26_2Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors26_2">
							<p class="color1" @click="selColor26_2(1)"></p>
							<p class="color2" @click="selColor26_2(2)"></p>
							<p class="color3" @click="selColor26_2(3)"></p>
							<p class="color4" @click="selColor26_2(4)"></p>
							<p class="color5" @click="selColor26_2(5)"></p>
							<p class="color6" @click="selColor26_2(6)"></p>
							<p class="color7" @click="selColor26_2(7)"></p>
							<p class="color8" @click="selColor26_2(8)"></p>
						</div>
						<input type="text" v-model="title26_2Color" readonly>
					</div>
					<div class="edit_top2_title_img">
						<p>图标</p>
						<div class="img_border">
							<img id="showImg26_2" src="../../assets/images/abao/bottomImg.jpg" alt="">
							<input type="file" id="file26_2" @change="upload26_2" style="display:none;">
							<button @click="autoClick26_2">更换图标</button>
						</div>
					</div>
					<div class="separate_lines">
						<div class="separate_line">
							<p>分隔线</p>
							<el-switch
								v-model="switch27_2"
								active-color="#3ca0ec"
								inactive-color="#cccdcd">
							</el-switch>
						</div>
						<div class="line_color" :class="{opacity2:!switch27_2}">
							<div class="selected_color" @click="showlineColors27_2=true">
								<p :style="{background:line27_2Color}"></p>
							</div>
							<div class="all_colors" v-if="showlineColors27_2">
								<p class="color1" @click="selLine27_2(1)"></p>
								<p class="color2" @click="selLine27_2(2)"></p>
								<p class="color3" @click="selLine27_2(3)"></p>
								<p class="color4" @click="selLine27_2(4)"></p>
								<p class="color5" @click="selLine27_2(5)"></p>
								<p class="color6" @click="selLine27_2(6)"></p>
								<p class="color7" @click="selLine27_2(7)"></p>
								<p class="color8" @click="selLine27_2(8)"></p>
							</div>
							<input type="text" v-model="line27_2Color" readonly>
						</div>
					</div>
				</div>
				<!-- 自定义3 -->
				<div class="edit_definite" v-if="selIndex2===5">
					<div class="edit_top2_title">
						<h2>底栏配置</h2>
						<p>保存配置</p>
					</div>
					<div class="edit_top2_title_color">
						<p>菜单颜色</p>
						<div class="selected_color" @click="showColors24_3=true">
							<p :style="{background:title24_3Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors24_3">
							<p class="color1" @click="selColor24_3(1)"></p>
							<p class="color2" @click="selColor24_3(2)"></p>
							<p class="color3" @click="selColor24_3(3)"></p>
							<p class="color4" @click="selColor24_3(4)"></p>
							<p class="color5" @click="selColor24_3(5)"></p>
							<p class="color6" @click="selColor24_3(6)"></p>
							<p class="color7" @click="selColor24_3(7)"></p>
							<p class="color8" @click="selColor24_3(8)"></p>
						</div>
						<input type="text" v-model="title24_3Color" readonly>
					</div>
					<div class="edit_top2_title_name">
						<p>名称</p>
						<input type="text" v-model="title24_3Name">
					</div>
					<div class="edit_top2_title_color">
						<p>颜色<span style="visibility:hidden;">颜色</span></p>
						<div class="selected_color" @click="showColors25_3=true">
							<p :style="{background:title25_3Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors25_3">
							<p class="color1" @click="selColor25_3(1)"></p>
							<p class="color2" @click="selColor25_3(2)"></p>
							<p class="color3" @click="selColor25_3(3)"></p>
							<p class="color4" @click="selColor25_3(4)"></p>
							<p class="color5" @click="selColor25_3(5)"></p>
							<p class="color6" @click="selColor25_3(6)"></p>
							<p class="color7" @click="selColor25_3(7)"></p>
							<p class="color8" @click="selColor25_3(8)"></p>
						</div>
						<input type="text" v-model="title25_3Color" readonly>
					</div>
					<div class="edit_top2_title_color">
						<p>选中颜色</p>
						<div class="selected_color" @click="showColors26_3=true">
							<p :style="{background:title26_3Color}"></p>
						</div>
						<div class="all_colors" v-if="showColors26_3">
							<p class="color1" @click="selColor26_3(1)"></p>
							<p class="color2" @click="selColor26_3(2)"></p>
							<p class="color3" @click="selColor26_3(3)"></p>
							<p class="color4" @click="selColor26_3(4)"></p>
							<p class="color5" @click="selColor26_3(5)"></p>
							<p class="color6" @click="selColor26_3(6)"></p>
							<p class="color7" @click="selColor26_3(7)"></p>
							<p class="color8" @click="selColor26_3(8)"></p>
						</div>
						<input type="text" v-model="title26_3Color" readonly>
					</div>
					<div class="edit_top2_title_img">
						<p>图标</p>
						<div class="img_border">
							<img id="showImg26_3" src="../../assets/images/abao/bottomImg.jpg" alt="">
							<input type="file" id="file26_3" @change="upload26_3" style="display:none;">
							<button @click="autoClick26_3">更换图标</button>
						</div>
					</div>
					<div class="separate_lines">
						<div class="separate_line">
							<p>分隔线</p>
							<el-switch
								v-model="switch27_3"
								active-color="#3ca0ec"
								inactive-color="#cccdcd">
							</el-switch>
						</div>
						<div class="line_color" :class="{opacity2:!switch27_3}">
							<div class="selected_color" @click="showlineColors27_3=true">
								<p :style="{background:line27_3Color}"></p>
							</div>
							<div class="all_colors" v-if="showlineColors27_3">
								<p class="color1" @click="selLine27_3(1)"></p>
								<p class="color2" @click="selLine27_3(2)"></p>
								<p class="color3" @click="selLine27_3(3)"></p>
								<p class="color4" @click="selLine27_3(4)"></p>
								<p class="color5" @click="selLine27_3(5)"></p>
								<p class="color6" @click="selLine27_3(6)"></p>
								<p class="color7" @click="selLine27_3(7)"></p>
								<p class="color8" @click="selLine27_3(8)"></p>
							</div>
							<input type="text" v-model="line27_3Color" readonly>
						</div>
					</div>
				</div>
			</div>
			<footer>
				<button @click="save2">保存并发布</button>
			</footer>
		</div>
		<!-- 自由MPK模式 -->
		<div class="content3" v-if="modelIndex===3">
			<div class="select_model_top">
				<h2>自由MPK模式</h2>
				<p>操作：1.制作MPK文件 2.上传MPK文件</p>
			</div>
		</div>
		<!-- 常规模式预览 -->
		<div class="is_preview" v-if="isPreview">
			<div class="common_model public_model">
				<div class="common_top">今日特卖</div>
				<div class="common_content">
					<div class="add_formats" v-if="selFormatData">
						<p>姓名：{{ selFormatData.name }}</p>
						<p>年龄：{{ selFormatData.age }}</p>
					</div>
					<p>+添加模块</p>
				</div>
				<div class="common_bottom">
					<div class="phone_show1_icon1"
					     :class="{sel1_1:indexIndex===index+1}" v-for="(item,index) in 5" :key="index" @click="selIcon1(index+1)">
						<img src="../../assets/images/manage/menu/gr_home.png" alt="">
						<p>首页</p>
					</div>
				</div>
			</div>
			<button @click="isPreview=false">退出预览</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'index_m',
		data() {
			return {
				indexIndex: 0, //底部icon索引
				modelIndex: 0, //1-常规模式 2-自由模式  3-自由MPK模式
				addModelIndex: 0, //0-普通  1-添加模块  2-属性编辑
				title2Name: '自定义',
				title24Name: '自定义',
				title24_2Name: '自定义',
				title24_3Name: '自定义',
				title2ColorIndex: 1,
				title22ColorIndex: 1,
				title23ColorIndex: 1,
				title24ColorIndex: 1,
				title24_2ColorIndex: 1,
				title24_3ColorIndex: 1,
				title25ColorIndex: 1,
				title25_2ColorIndex: 1,
				title25_3ColorIndex: 1,
				title26ColorIndex: 1,
				title26_2ColorIndex: 1,
				title26_3ColorIndex: 1,
				arrow2ColorIndex: 1,
				line2ColorIndex: 1,
				line27ColorIndex: 1,
				line27_2ColorIndex: 1,
				line27_3ColorIndex: 1,
				showColors2: false, //是否显示标题所有颜色
				showColors22: false, //是否显示标题所有颜色
				showColors23: false, //是否显示标题所有颜色
				showColors24: false, //是否显示标题所有颜色
				showColors24_2: false, //是否显示标题所有颜色
				showColors24_3: false, //是否显示标题所有颜色
				showColors25: false, //是否显示标题所有颜色
				showColors25_2: false, //是否显示标题所有颜色
				showColors25_3: false, //是否显示标题所有颜色
				showColors26: false, //是否显示标题所有颜色
				showColors26_2: false, //是否显示标题所有颜色
				showColors26_3: false, //是否显示标题所有颜色
				showArrowColors2: false, //是否显示箭头所有颜色
				showlineColors2: false, //是否显示分隔线所有颜色
				showlineColors27: false, //是否显示分隔线所有颜色
				showlineColors27_2: false, //是否显示分隔线所有颜色
				showlineColors27_3: false, //是否显示分隔线所有颜色
				imgUrl2: '',
				imgUrl26: '',
				imgUrl26_2: '',
				imgUrl26_3: '',
				imgUrl22: '',
				option1: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value1: '',
				formatData: [{name:'ha',age:23},{name:'fa',age:24}],
				selFormatData: '',
				option2: [{
					value: '选项1',
					label: '黄金糕2'
				}, {
					value: '选项2',
					label: '双皮奶2'
				}, {
					value: '选项3',
					label: '蚵仔煎2'
				}, {
					value: '选项4',
					label: '龙须面2'
				}, {
					value: '选项5',
					label: '北京烤鸭2'
				}],
				value2: '',
				option3: [{
					value: '选项1',
					label: '黄金糕3'
				}, {
					value: '选项2',
					label: '双皮奶3'
				}, {
					value: '选项3',
					label: '蚵仔煎3'
				}, {
					value: '选项4',
					label: '龙须面3'
				}, {
					value: '选项5',
					label: '北京烤鸭3'
				}],
				value3: '',
				isSelectData: false,
				input1: '', //搜索相关文章
				addDatas: [], //添加的数据
				showLists: false, //是否显示列表
				tableData3: [{
					date: '2016-05-03',
					name: '娱乐',
					address: '20条'
				}, {
					date: '2016-05-02',
					name: '要闻',
					address: '20条'
				}, {
					date: '2016-05-04',
					name: '八卦',
					address: '20条'
				}, {
					date: '2016-05-01',
					name: '军事',
					address: '20条'
				}, {
					date: '2016-05-08',
					name: '科技',
					address: '20条'
				}, {
					date: '2016-05-06',
					name: '政治',
					address: '0条'
				}, {
					date: '2016-05-07',
					name: '搞笑',
					address: '20条'
				}, {
					date: '2016-05-07',
					name: '搞笑',
					address: '20条'
				}, {
					date: '2016-05-07',
					name: '搞笑',
					address: '20条'
				}, {
					date: '2016-05-07',
					name: '搞笑',
					address: '20条'
				}, {
					date: '2016-05-07',
					name: '搞笑',
					address: '20条'
				}],
				multipleSelection: [],
				isPreview: false, //是否预览
				selIndex2: 0, //自由模式选中索引
				switch1: false, //滑动渐显
				option4: [{
					value: '选项1',
					label: '15%'
				}, {
					value: '选项2',
					label: '30%'
				}, {
					value: '选项3',
					label: '50%'
				}, {
					value: '选项4',
					label: '80%'
				}, {
					value: '选项5',
					label: '100%'
				}],
				value4: '',
				switch2: false, //分隔线
				switch27: false, //分隔线
				switch27_2: false, //分隔线
				switch27_3: false, //分隔线
			}
		},
		components: {

		},
		computed: {
			title2Color(){
				if(this.title2ColorIndex===1){
					return '#000000';
				}else if(this.title2ColorIndex===2){
					return '#2828FF';
				}else if(this.title2ColorIndex===3){
					return '#00DB00';
				}else if(this.title2ColorIndex===4){
					return '#FF0000';
				}else if(this.title2ColorIndex===5){
					return '#F9F900';
				}else if(this.title2ColorIndex===6){
					return '#A8FF24';
				}else if(this.title2ColorIndex===7){
					return '#AFAF61';
				}else if(this.title2ColorIndex===8){
					return '#B766AD';
				}
			},
			title22Color(){
				if(this.title22ColorIndex===1){
					return '#ffffff';
				}else if(this.title22ColorIndex===2){
					return '#2828FF';
				}else if(this.title22ColorIndex===3){
					return '#00DB00';
				}else if(this.title22ColorIndex===4){
					return '#FF0000';
				}else if(this.title22ColorIndex===5){
					return '#F9F900';
				}else if(this.title22ColorIndex===6){
					return '#A8FF24';
				}else if(this.title22ColorIndex===7){
					return '#AFAF61';
				}else if(this.title22ColorIndex===8){
					return '#B766AD';
				}
			},
			title23Color(){
				if(this.title23ColorIndex===1){
					return '#ffffff';
				}else if(this.title23ColorIndex===2){
					return '#2828FF';
				}else if(this.title23ColorIndex===3){
					return '#00DB00';
				}else if(this.title23ColorIndex===4){
					return '#FF0000';
				}else if(this.title23ColorIndex===5){
					return '#F9F900';
				}else if(this.title23ColorIndex===6){
					return '#A8FF24';
				}else if(this.title23ColorIndex===7){
					return '#AFAF61';
				}else if(this.title23ColorIndex===8){
					return '#B766AD';
				}
			},
			title24Color(){
				if(this.title24ColorIndex===1){
					return '#000000';
				}else if(this.title24ColorIndex===2){
					return '#2828FF';
				}else if(this.title24ColorIndex===3){
					return '#00DB00';
				}else if(this.title24ColorIndex===4){
					return '#FF0000';
				}else if(this.title24ColorIndex===5){
					return '#F9F900';
				}else if(this.title24ColorIndex===6){
					return '#A8FF24';
				}else if(this.title24ColorIndex===7){
					return '#AFAF61';
				}else if(this.title24ColorIndex===8){
					return '#B766AD';
				}
			},
			title24_2Color(){
				if(this.title24_2ColorIndex===1){
					return '#000000';
				}else if(this.title24_2ColorIndex===2){
					return '#2828FF';
				}else if(this.title24_2ColorIndex===3){
					return '#00DB00';
				}else if(this.title24_2ColorIndex===4){
					return '#FF0000';
				}else if(this.title24_2ColorIndex===5){
					return '#F9F900';
				}else if(this.title24_2ColorIndex===6){
					return '#A8FF24';
				}else if(this.title24_2ColorIndex===7){
					return '#AFAF61';
				}else if(this.title24_2ColorIndex===8){
					return '#B766AD';
				}
			},
			title24_3Color(){
				if(this.title24_3ColorIndex===1){
					return '#000000';
				}else if(this.title24_3ColorIndex===2){
					return '#2828FF';
				}else if(this.title24_3ColorIndex===3){
					return '#00DB00';
				}else if(this.title24_3ColorIndex===4){
					return '#FF0000';
				}else if(this.title24_3ColorIndex===5){
					return '#F9F900';
				}else if(this.title24_3ColorIndex===6){
					return '#A8FF24';
				}else if(this.title24_3ColorIndex===7){
					return '#AFAF61';
				}else if(this.title24_3ColorIndex===8){
					return '#B766AD';
				}
			},
			title25Color(){
				if(this.title25ColorIndex===1){
					return '#000000';
				}else if(this.title25ColorIndex===2){
					return '#2828FF';
				}else if(this.title25ColorIndex===3){
					return '#00DB00';
				}else if(this.title25ColorIndex===4){
					return '#FF0000';
				}else if(this.title25ColorIndex===5){
					return '#F9F900';
				}else if(this.title25ColorIndex===6){
					return '#A8FF24';
				}else if(this.title25ColorIndex===7){
					return '#AFAF61';
				}else if(this.title25ColorIndex===8){
					return '#B766AD';
				}
			},
			title25_2Color(){
				if(this.title25_2ColorIndex===1){
					return '#000000';
				}else if(this.title25_2ColorIndex===2){
					return '#2828FF';
				}else if(this.title25_2ColorIndex===3){
					return '#00DB00';
				}else if(this.title25_2ColorIndex===4){
					return '#FF0000';
				}else if(this.title25_2ColorIndex===5){
					return '#F9F900';
				}else if(this.title25_2ColorIndex===6){
					return '#A8FF24';
				}else if(this.title25_2ColorIndex===7){
					return '#AFAF61';
				}else if(this.title25_2ColorIndex===8){
					return '#B766AD';
				}
			},
			title25_3Color(){
				if(this.title25_3ColorIndex===1){
					return '#000000';
				}else if(this.title25_3ColorIndex===2){
					return '#2828FF';
				}else if(this.title25_3ColorIndex===3){
					return '#00DB00';
				}else if(this.title25_3ColorIndex===4){
					return '#FF0000';
				}else if(this.title25_3ColorIndex===5){
					return '#F9F900';
				}else if(this.title25_3ColorIndex===6){
					return '#A8FF24';
				}else if(this.title25_3ColorIndex===7){
					return '#AFAF61';
				}else if(this.title25_3ColorIndex===8){
					return '#B766AD';
				}
			},
			title26Color(){
				if(this.title26ColorIndex===1){
					return '#000000';
				}else if(this.title26ColorIndex===2){
					return '#2828FF';
				}else if(this.title26ColorIndex===3){
					return '#00DB00';
				}else if(this.title26ColorIndex===4){
					return '#FF0000';
				}else if(this.title26ColorIndex===5){
					return '#F9F900';
				}else if(this.title26ColorIndex===6){
					return '#A8FF24';
				}else if(this.title26ColorIndex===7){
					return '#AFAF61';
				}else if(this.title26ColorIndex===8){
					return '#B766AD';
				}
			},
			title26_2Color(){
				if(this.title26_2ColorIndex===1){
					return '#000000';
				}else if(this.title26_2ColorIndex===2){
					return '#2828FF';
				}else if(this.title26_2ColorIndex===3){
					return '#00DB00';
				}else if(this.title26_2ColorIndex===4){
					return '#FF0000';
				}else if(this.title26_2ColorIndex===5){
					return '#F9F900';
				}else if(this.title26_2ColorIndex===6){
					return '#A8FF24';
				}else if(this.title26_2ColorIndex===7){
					return '#AFAF61';
				}else if(this.title26_2ColorIndex===8){
					return '#B766AD';
				}
			},
			title26_3Color(){
				if(this.title26_3ColorIndex===1){
					return '#000000';
				}else if(this.title26_3ColorIndex===2){
					return '#2828FF';
				}else if(this.title26_3ColorIndex===3){
					return '#00DB00';
				}else if(this.title26_3ColorIndex===4){
					return '#FF0000';
				}else if(this.title26_3ColorIndex===5){
					return '#F9F900';
				}else if(this.title26_3ColorIndex===6){
					return '#A8FF24';
				}else if(this.title26_3ColorIndex===7){
					return '#AFAF61';
				}else if(this.title26_3ColorIndex===8){
					return '#B766AD';
				}
			},
			arrow2Color(){
				if(this.arrow2ColorIndex===1){
					return '#000000';
				}else if(this.arrow2ColorIndex===2){
					return '#2828FF';
				}else if(this.arrow2ColorIndex===3){
					return '#00DB00';
				}else if(this.arrow2ColorIndex===4){
					return '#FF0000';
				}else if(this.arrow2ColorIndex===5){
					return '#F9F900';
				}else if(this.arrow2ColorIndex===6){
					return '#A8FF24';
				}else if(this.arrow2ColorIndex===7){
					return '#AFAF61';
				}else if(this.arrow2ColorIndex===8){
					return '#B766AD';
				}
			},
			line2Color(){
				if(this.line2ColorIndex===1){
					return '#000000';
				}else if(this.line2ColorIndex===2){
					return '#2828FF';
				}else if(this.line2ColorIndex===3){
					return '#00DB00';
				}else if(this.line2ColorIndex===4){
					return '#FF0000';
				}else if(this.line2ColorIndex===5){
					return '#F9F900';
				}else if(this.line2ColorIndex===6){
					return '#A8FF24';
				}else if(this.line2ColorIndex===7){
					return '#AFAF61';
				}else if(this.line2ColorIndex===8){
					return '#B766AD';
				}
			},
			line27Color(){
				if(this.line27ColorIndex===1){
					return '#000000';
				}else if(this.line27ColorIndex===2){
					return '#2828FF';
				}else if(this.line27ColorIndex===3){
					return '#00DB00';
				}else if(this.line27ColorIndex===4){
					return '#FF0000';
				}else if(this.line27ColorIndex===5){
					return '#F9F900';
				}else if(this.line27ColorIndex===6){
					return '#A8FF24';
				}else if(this.line27ColorIndex===7){
					return '#AFAF61';
				}else if(this.line27ColorIndex===8){
					return '#B766AD';
				}
			},
			line27_2Color(){
				if(this.line27_2ColorIndex===1){
					return '#000000';
				}else if(this.line27_2ColorIndex===2){
					return '#2828FF';
				}else if(this.line27_2ColorIndex===3){
					return '#00DB00';
				}else if(this.line27_2ColorIndex===4){
					return '#FF0000';
				}else if(this.line27_2ColorIndex===5){
					return '#F9F900';
				}else if(this.line27_2ColorIndex===6){
					return '#A8FF24';
				}else if(this.line27_2ColorIndex===7){
					return '#AFAF61';
				}else if(this.line27_2ColorIndex===8){
					return '#B766AD';
				}
			},
			line27_3Color(){
				if(this.line27_3ColorIndex===1){
					return '#000000';
				}else if(this.line27_3ColorIndex===2){
					return '#2828FF';
				}else if(this.line27_3ColorIndex===3){
					return '#00DB00';
				}else if(this.line27_3ColorIndex===4){
					return '#FF0000';
				}else if(this.line27_3ColorIndex===5){
					return '#F9F900';
				}else if(this.line27_3ColorIndex===6){
					return '#A8FF24';
				}else if(this.line27_3ColorIndex===7){
					return '#AFAF61';
				}else if(this.line27_3ColorIndex===8){
					return '#B766AD';
				}
			},
		},
		created() {

		},
		methods: {
			//首页管理选中icon
			selIcon1(id) {
				this.indexIndex = id;
			},
			//选择
			selModel(id){
				this.modelIndex = id;
			},
			//添加模块
			addModel(){
				this.addModelIndex = 1;
			},
			//改变类型
			changeType(){
				console.log(this.value1);
			},
			//改变列数
			changeColumn(){
				console.log(this.value2);
			},
			//改变排序
			changeSort(){
				console.log(this.value3);
			},
			//选中版式
			selFormat(obj){
				this.selFormatData = obj;
			},
			//属性编辑
			attrEdit(){
				this.addModelIndex = 2;
			},
			//选取数据
			selDatas(){
				this.isSelectData = true;
			},
			//保存
			save1(){
				this.indexIndex = this.modelIndex = this.addModelIndex = 0;
			},
			//自由模式顶部保存
			save2(){
				if(this.selIndex2 === 0){
					this.$alert('请选择模块','标题名称');
					return;
				}
			},
			//预览
			preview1(){
				this.isPreview = true;
			},
			//键盘搜索
			keySearch(){
				let ev = window.event;
				if(ev.keyCode === 13){
					this.searchs();
				}
			},
			//搜索
			searchs(){
				console.log(1);
			},
			//添加内容
			addContent(){
				this.showLists = true;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(val);
			},
			//确定
			ensure(){
				this.addDatas.push(...this.multipleSelection);
				this.showLists = false;
			},
			//取消
			cancel(){
				this.showLists = false;
			},
			//自由模式选中索引
			changeIndex2(id){
				this.selIndex2 = id;
			},
			//自由模式选择标题颜色
			selColor2(id){
				this.title2ColorIndex = id;
				this.showColors2 = false;
			},
			selColor22(id){
				this.title22ColorIndex = id;
				this.showColors22 = false;
			},
			selColor23(id){
				this.title23ColorIndex = id;
				this.showColors23 = false;
			},
			selColor24(id){
				this.title24ColorIndex = id;
				this.showColors24 = false;
			},
			selColor24_2(id){
				this.title24_2ColorIndex = id;
				this.showColors24_2 = false;
			},
			selColor24_3(id){
				this.title24_3ColorIndex = id;
				this.showColors24_3 = false;
			},
			selColor25(id){
				this.title25ColorIndex = id;
				this.showColors25 = false;
			},
			selColor25_2(id){
				this.title25_2ColorIndex = id;
				this.showColors25_2 = false;
			},
			selColor25_3(id){
				this.title25_3ColorIndex = id;
				this.showColors25_3 = false;
			},
			selColor26(id){
				this.title26ColorIndex = id;
				this.showColors26 = false;
			},
			selColor26_2(id){
				this.title26_2ColorIndex = id;
				this.showColors26_2 = false;
			},
			selColor26_3(id){
				this.title26_3ColorIndex = id;
				this.showColors26_3 = false;
			},
			//自由模式选择箭头颜色
			selArrow2(id){
				this.arrow2ColorIndex = id;
				this.showArrowColors2 = false;
			},
			//自由模式选择分割线颜色
			selLine2(id){
				this.line2ColorIndex = id;
				this.showlineColors2 = false;
			},
			//自由模式选择分割线颜色
			selLine27(id){
				this.line27ColorIndex = id;
				this.showlineColors27 = false;
			},
			//自由模式选择分割线颜色
			selLine27_2(id){
				this.line27_2ColorIndex = id;
				this.showlineColors27_2 = false;
			},
			//自由模式选择分割线颜色
			selLine27_3(id){
				this.line27_3ColorIndex = id;
				this.showlineColors27_3 = false;
			},
			//自由模式选择图片
			autoClick2(){
				document.getElementById('file2').click();
			},
			//自由模式选择图片
			autoClick22(){
				document.getElementById('file22').click();
			},
			//自由模式选择图片
			autoClick26(){
				document.getElementById('file26').click();
			},
			//自由模式选择图片
			autoClick26_2(){
				document.getElementById('file26_2').click();
			},
			//自由模式选择图片
			autoClick26_3(){
				document.getElementById('file26_3').click();
			},
			//上传
			upload2($event){
				if ($event.target.files.length == 0){
					return ;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg');
				fr.onload = function(evt){
					sImg.src = evt.target.result;
					that.imgUrl2 = evt.target.result;
				}
			},
			//上传
			upload26($event){
				if ($event.target.files.length == 0){
					return ;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg26');
				fr.onload = function(evt){
					sImg.src = evt.target.result;
					that.imgUrl26 = evt.target.result;
				}
			},
			//上传
			upload26_2($event){
				if ($event.target.files.length == 0){
					return ;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg26_2');
				fr.onload = function(evt){
					sImg.src = evt.target.result;
					that.imgUrl26_2 = evt.target.result;
				}
			},
			//上传
			upload26_3($event){
				if ($event.target.files.length == 0){
					return ;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg26_3');
				fr.onload = function(evt){
					sImg.src = evt.target.result;
					that.imgUrl26_3 = evt.target.result;
				}
			},
			//上传
			upload22($event){
				if ($event.target.files.length == 0){
					return ;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg22');
				fr.onload = function(evt){
					sImg.src = evt.target.result;
					that.imgUrl22 = evt.target.result;
				}
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.index_m {
		>h1 {
			text-align: left;
			font-size: 34px;
			color: #000;
			font-weight: 500;
			padding: 38px 0 28px 72px;			
			border-bottom: 1px solid #cdcdcd;
		}
		.select_model_top{
			height: 120px;
			background: #f4f5f9;
			padding: 0 66px;
			display: flex;
			align-items: center;
			h2{
				font-size: 24px;
				color: #666;
				font-weight: 500;
				text-align: left;
			}
			p{
				font-size: 18px;
				color: #999;
				margin-left: 40px;
			}
		}
		.public_model{
			width: 299px;
			height: 552px;
			background: url('../../assets/images/manage/indexM/phone.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.common_top{
				height: 40px;
				line-height: 40px;
				background: #bebfc3;
				font-size: 18px;
				color: #fff;
			}
			.common_content{
				font-size: 15px;
				color: #3f3f3f;
			}
			.common_bottom {
				width: 100%;
				height: 38px;
				display: flex;
				justify-content: center;
				.phone_show1_icon1 {
					width: 18%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					img {
						width: 21px;
						height: 21px;
						opacity: .2;
					}
					p {
						height: 18px;
						font-size: 9px;
						color: #7f7f7f;
						white-space: nowrap;
					}
				}
				.sel1 {
					img {
						opacity: 1;
					}
					p {
						color: #000;
					}
				}
				.sel1_1 {
					border: 1px solid #3ca0ec;
					img {
						opacity: 1;
					}
					p {
						color: #3ca0ec;
					}
				}
			}
		}
		.content0 {
			.all_models{
				display: flex;
				justify-content: space-around;
				margin: 20px 0 40px 0;				
				.free_model{
					.common_top{
						background: #f7f7f7;
						font-size: 15px;
						color: #3f3f3f;
					}
					.diy_footer{
						width: 100%;
						display: flex;
						p{
							width: 25%;
							height: 38px;
							line-height: 38px;
							border-right: 1px solid #e7e7eb;
							font-size: 15px;
							color: #3f3f3f;
						}
						p:last-of-type{
							font-size: 20px;
						}
					}
				}				
			}
			.all_options{
				display: flex;
				justify-content: space-around;
				.public_option{
					width: 299px;
					display: flex;
					flex-direction: column;
					align-items: center;
					h1{
						font-size: 24px;
						color: #666;
						font-weight: 500;
					}
					p{
						font-size: 18px;
						color: #999;
						margin: 22px 0 28px 0;
					}
					button{
						width: 180px;
						height: 55px;
						line-height: 55px;
						background: #3ca0ec;
						font-size: 24px;
						color: #fff;
					}
				}
			}
		}
		.content1{
			.content1_option{
				display: flex;
				padding: 28px 16px;
				.common_content{
					.add_formats{
						width: 100%;
						cursor: pointer;
						border: 1px dashed #3ca0ec;
					}
					>p{
						width: 118px;
						height: 36px;
						line-height: 36px;
						margin: 0 auto;
						border: 1px dashed #bfbfbf;
						cursor: pointer;
					}
				}
				.no_content1{
					height: 525px;
					line-height: 525px;
					font-size: 24px;
					color: #666;
					margin-left: 15%;
				}
				.add_model{
					width: 624px;
					height: 646px;
					background: #f4f5f9;
					margin-left: 25px;
					border: 1px solid #e7e7eb;
					>h5{
						text-align: left;
						font-size: 28px;
						color: #000;
						font-weight: 400;
						padding: 25px 0 23px 43px;
						border-bottom: 1px solid #e7e7eb;
					}
					.type1{
						width: 100%;
						display: flex;
						align-items: center;
						padding: 35px 42px;
						p{
							font-size: 26px;
							color: #666;
							margin-right: 66px;
						}
					}
					.format1{
						display: flex;
						flex-direction: column;
						p{
							font-size: 26px;
							color: #666;
							text-align: left;
							margin: 0 0 14px 42px;
						}
						.format1_lists{
							width: 100%;
							height: 332px;
							margin: 0 auto;
							display: flex;
							.format1_list{
								width: 260px;
								height: 332px;
								border: 1px solid #dcdcdc;
								margin-left: 36px;
								cursor: pointer;
							}
						}
					}
				}
				.attr_edit{
					width: 624px;
					background: #f4f5f9;
					margin-left: 25px;
					border: 1px solid #e7e7eb;
					padding-bottom: 90px;
					.edit_title{
						padding: 26px 40px;
						border-bottom: 1px solid #e4e8eb;
						display: flex;
						justify-content: space-between;
						h3,p{
							font-size: 28px;
							color: #000;
							font-weight: 400;
						}
						p{
							color: #3ca0ec;
							cursor: pointer;
						}
					}
					.sel_datas{
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 22px 0 68px 0;
						>p{
							text-align: left;
							width: 530px;
							font-size: 26px;
							color: #666;
							margin-bottom: 22px;
						}
						.sel_data_input{
							width: 522px;
							height: 80px;
							position: relative;
							input{
								width: 522px;
								height: 80px;
								border: 1px solid #ddd;
								font-size: 24px;
								color: #000;
								padding: 0 18px;
								&::placeholder{
									font-size: 22px;
									color: #999;
								}
							}
							p{
								position: absolute;
								top: 50%;
								right: 16px;
								transform: translateY(-50%);
								width: 102px;
								height: 54px;
								line-height: 54px;
								font-size: 20px;
								color: #3ca0ec;
								border: 1px dashed #3ca0ec;
								cursor: pointer;
							}
						}
					}
					.edit_selects{
						.column_select{
							display: flex;
							align-items: center;
							justify-content: center;
							>p{
								width: 176px;
								text-align: left;
								font-size: 26px;
								color: #666;
							}
						}
						.sort_select{
							margin-top: 55px;
						}
					}
					.sel_mask{
						position: fixed;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
						background: rgba(0,0,0,.5);
						display: flex;
						align-items: center;
						justify-content: center;
						.edit_table_info{
							width: 69%;
							height: 686px;
							background: #fff;
							margin-left: 13.8%;
							.close{
								display: flex;
								justify-content: flex-end;
								padding: 20px 10px;
								p{
									width: 28px;
									height: 28px;
									line-height: 25px;
									font-size: 18px;
									color: #878787;
									cursor: pointer;
								}
							}
							.edit_table_condition{
								width: 87.8%;
								margin: -15px auto 0 auto;
								h2{
									font-size: 23px;
									color: #666;
									font-weight: 400;
									text-align: left;
								}
								.edit_table_search{
									display: flex;
									justify-content: space-between;
									padding: 0 8px;
									margin: 20px 0;
									p{
										font-size: 19px;
										color: #9c9c9c;
									}
								}
							}
							.add_table_infos{
								width: 88%;
								height: 445px;
								margin: 0 auto;
								border: 1px solid #ddd;
								.add_no_table{
									height: 100%;
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									h1{
										font-size: 24px;
										color: #666;
										font-weight: 400;
										margin-bottom: 60px;
									}
									p{
										font-size: 15px;
										color: #3f3f3f;
										border: 1px dashed #bfbfbf;
										padding: 10px 22px;
										cursor: pointer;
									}
								}
								.add_datas{
									height: 444px;
									overflow: auto;
								}
								.table_lists{
									height: 444px;
									overflow: auto;
								}
							}
							.add_table_btn{
								width: 40%;
								display: flex;
								justify-content: space-around;
								margin: 20px auto 0 auto;
								button{
									width: 120px;
									height: 42px;
									line-height: 42px;
									font-size: 20px;
								}
								button:nth-of-type(1){
									background: #3ca0ec;
									color: #fff;
								}
								button:nth-of-type(2){
									background: #fff;
									color: #666;
									border: 1px solid #b1b1b1;
								}
							}
						}
					}
				}
			}
			.content1_btns{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin-top: 130px;
				button:nth-of-type(1){
					width: 200px;
					height: 55px;
					line-height: 55px;
					background: #3ca0ec;
					font-size: 25px;
					color: #fff;
				}
				button:nth-of-type(2){
					width: 152px;
					height: 55px;
					line-height: 55px;
					background: #fff;
					font-size: 25px;
					color: #666;
					border: 1px solid #b1b1b1;
					margin: 0 16% 0 5%;
				}
			}
		}
		.content2{
			.content2_option{
				display: flex;
				padding: 28px 16px;
				.public_model{
					.common_top{
						background: #f7f7f7;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 12px;
						span{
							width: 12px;
							height: 12px;
							border-top: 1px solid;
							border-left: 1px solid;
							border-color: #000000;
							transform: rotate(-45deg);
						}
						h6{
							font-size: 15px;
							color: #3f3f3f;
							font-weight: 400;
						}
					}
					.common_content{
						height: 86%;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;
						p{
							width: 118px;
							height: 36px;
							line-height: 36px;
							margin: 0 auto;
							border: 1px dashed #bfbfbf;
							cursor: pointer;
						}
					}
					.common_bottom{
						.diy_footer{
							width: 100%;
							display: flex;
							p{
								width: 25%;
								height: 38px;
								line-height: 38px;
								border-right: 1px solid #e7e7eb;
								font-size: 15px;
								color: #3f3f3f;
								cursor: pointer;
							}
							p:last-of-type{
								font-size: 20px;
							}
						}
					}
					.dashed{
						border: 1px dashed #3ca0ec!important;
					}
				}
			}
			.no_content2{
				height: 525px;
				line-height: 525px;
				font-size: 24px;
				color: #666;
				margin-left: 15%;
			}
			.edit_top2,.edit_definite{
				width: 624px;
				height: 646px;
				background: #f4f5f9;
				margin-left: 25px;
				border: 1px solid #e7e7eb;
				.edit_top2_title{
					display: flex;
					justify-content: space-between;
					padding: 24px 40px;
					border-bottom: 1px solid #e4e8eb;
					h2{
						font-size: 26px;
						color: #000;
						font-weight: 400;
					}
					p{
						font-size: 26px;
						color: #d0cfcf;
					}
				}
				.edit_top2_title_name,.edit_top2_title_color{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24px 40px;
					p{
						font-size: 28px;
						color: #666;
					}
					input{
						width: 356px;
						height: 78px;
						line-height: 78px;
						border: 1px solid #ddd;
						font-size: 34px;
						color: #222;
						padding: 0 22px;
					}
				}
				.edit_top2_title_color{
					padding: 0 40px;
					position: relative;
					input{
						width: 246px;
					}
					.selected_color{
						width: 34px;
						height: 34px;
						border: 1px solid #ddd;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						p{
							width: 75%;
							height: 75%;
						}
					}
					.all_colors{
						position: absolute;
						left: 40%;
						bottom: -95px;
						transform: translateX(-50%);
						width: 200px;
						background: #fff;
						display: flex;
						flex-wrap: wrap;
						padding-bottom: 20px;
						z-index: 999;
						p{
							width: 25px;
							height: 25px;
							margin: 20px 0 0 20px;
							cursor: pointer;
						}
						.color1{
							background: #000000;
						}
						.color2{
							background: #2828FF;
						}
						.color3{
							background: #00DB00;
						}
						.color4{
							background: #FF0000;
						}
						.color5{
							background: #F9F900;
						}
						.color6{
							background: #A8FF24;
						}
						.color7{
							background: #AFAF61;
						}
						.color8{
							background: #B766AD;
						}
					}
				}
				.edit_top2_title_img{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24px 40px;
					p{
						font-size: 28px;
						color: #666;
					}
					.img_border{
						width: 356px;
						height: 80px;
						border: 1px dashed #c3c3c5;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 54px 0 14px;
						img{
							width: 148px;
							height: 46px;
						}
						button{
							width: 78px;
							height: 32px;
							line-height: 32px;
							background: #999;
							font-size: 17px;
							color: #fff;
						}
					}
				}
				.slide_shows{
					height: 40px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 40px 24px 40px;
					p{
						font-size: 28px;
						color: #666;
						margin-right: 30px;
					}
					.slide_show,.slide_position{
						display: flex;
						align-items: center;
					}
				}
				.separate_lines{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24px 40px;
					position: relative;
					.opacity2{
						opacity: .5;
					}
					.separate_line,.line_color{
						display: flex;
						align-items: center;
						>p{
							font-size: 28px;
							color: #666;
							margin-right: 30px;
						}
						input{
							width: 246px;
							height: 78px;
							line-height: 78px;
							border: 1px solid #ddd;
							font-size: 34px;
							color: #222;
							padding: 0 22px;
						}
						.selected_color{
							width: 34px;
							height: 34px;
							border: 1px solid #ddd;
							display: flex;
							align-items: center;
							justify-content: center;
							cursor: pointer;
							margin-right: 20px;
							p{
								width: 25px;
								height: 25px;
							}
						}
						.all_colors{
							position: absolute;
							left: 45%;
							bottom: -80px;
							transform: translateX(-50%);
							width: 200px;
							background: #fff;
							display: flex;
							flex-wrap: wrap;
							padding-bottom: 20px;
							z-index: 999;
							p{
								width: 25px;
								height: 25px;
								margin: 20px 0 0 20px;
								cursor: pointer;
							}
							.color1{
								background: #000000;
							}
							.color2{
								background: #2828FF;
							}
							.color3{
								background: #00DB00;
							}
							.color4{
								background: #FF0000;
							}
							.color5{
								background: #F9F900;
							}
							.color6{
								background: #A8FF24;
							}
							.color7{
								background: #AFAF61;
							}
							.color8{
								background: #B766AD;
							}
						}
					}
				}
			}
			.edit_definite{
				height: 710px;
				.edit_top2_title_color{
					margin-top:20px;
				}
				.edit_top2_title_img{
					.img_border{
						border:none;
					}
					>img{
						width:70px;
						height:70px;
					}
					>button{
						width:150px;
						height:56px;
						line-height:56px;
						border:1px solid #b1b1b1;
						background:#fff;
						color:#666;
					}
				}
				.separate_lines{
					padding:0 40px;
					margin-top: -20px;
				}
			}
			.edit_content2{
				width: 624px;
				height: 552px;
				background: #f4f5f9;
				margin-left: 25px;
				border: 1px solid #e7e7eb;
				.edit_content2_title{
					display: flex;
					justify-content: space-between;
					padding: 24px 40px;
					border-bottom: 1px solid #e4e8eb;
					h2{
						font-size: 26px;
						color: #000;
						font-weight: 400;
					}
					p{
						font-size: 26px;
						color: #d0cfcf;
					}
				}
				.edit_content2_title_color{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24px 40px;
					position: relative;
					input{
						width: 246px;
						height: 78px;
						line-height: 78px;
						border: 1px solid #ddd;
						font-size: 34px;
						color: #222;
						padding: 0 22px;
					}
					.selected_color{
						width: 34px;
						height: 34px;
						border: 1px solid #ddd;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						p{
							width: 75%;
							height: 75%;
						}
					}
					.all_colors{
						position: absolute;
						left: 40%;
						bottom: -95px;
						transform: translateX(-50%);
						width: 200px;
						background: #fff;
						display: flex;
						flex-wrap: wrap;
						padding-bottom: 20px;
						z-index: 999;
						p{
							width: 25px;
							height: 25px;
							margin: 20px 0 0 20px;
							cursor: pointer;
						}
						.color1{
							background: #ffffff;
						}
						.color2{
							background: #2828FF;
						}
						.color3{
							background: #00DB00;
						}
						.color4{
							background: #FF0000;
						}
						.color5{
							background: #F9F900;
						}
						.color6{
							background: #A8FF24;
						}
						.color7{
							background: #AFAF61;
						}
						.color8{
							background: #B766AD;
						}
					}
				}
				.edit_content2_title_img{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24px 40px;
					p{
						font-size: 28px;
						color: #666;
					}
					.img_border{
						width: 356px;
						height: 80px;
						border: 1px dashed #c3c3c5;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 54px 0 14px;
						img{
							width: 148px;
							height: 46px;
						}
						button{
							width: 78px;
							height: 32px;
							line-height: 32px;
							background: #999;
							font-size: 17px;
							color: #fff;
						}
					}
				}
			}
			footer{
				display: flex;
				justify-content: center;
				button{
					width: 200px;
					height: 55px;
					line-height: 55px;
					background: #3ca0ec;
					font-size: 25px;
					color: #fff;
				}
			}
		}		
		.is_preview {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			background: rgba(0, 0, 0, .5);
			z-index: 99;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.public_model{
				width: 300px;
				height: 600px;
				background: url('../../assets/images/manage/menu/YourScreenHere1.png') no-repeat;
				background-size: 100% 100%;
				.common_top{
					background: transparent;
					margin-top: 35px;
					color: #000;
				}
				.common_content{
					>p{
						width: 118px;
						height: 36px;
						line-height: 36px;
						margin: 0 auto;
						border: 1px dashed #bfbfbf;
					}
				}
				.common_bottom{
					width: 86%;
					margin: 0 auto 30px auto;
					border-top: 1px solid #e2e2e2;
					.phone_show1_icon1{
						cursor: default;
					}
				}
			}
			button {
				width: 190px;
				height: 58px;
				line-height: 58px;
				background: #fff;
				font-size: 19px;
				color: #3ca0ec;
				border-radius: 5px;
				margin-top: 36px;
			}
		}
	}
</style>